<!--  -->
<template>
  <div
    class="blockcontent"
    :style="{'fontSize':mFontStyle.fontsize+'px','color':mFontStyle.fontcolor,'fontFamily':mFontStyle.fontfamily,
   }"
  >
    <div
      class="mtitle"
      :style="{ 'box-shadow':mifchoose? `0 0 15px #5aa2e3`:'' }"
      v-html="mtitle"
      ref="text"
    >{{mtitle}}</div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  props: ["fontstyle", "chartData", "title", "ifchoose", "id", "width","fontsize"],
  data() {
    return {
      mFontStyle: this.fontstyle,
      mtitle: this.title,
      mifchoose: ""
    };
  },

  components: {},
  mounted() {
    let percent = parseFloat(this.$refs.text.offsetHeight / 1263).toFixed(2);
    this.$emit("changetextheight", percent, this.id);
  },
  computed: {
    content: function() {
      return this.text;
    },
    listenChange() {
      const { width, mtitle ,fontsize} = this;
      return { width, mtitle ,fontsize};
    }
  },
  watch: {
    listenChange(){
      let that = this;
      Vue.nextTick(function() {
        // DOM 更新了
        let percent = parseFloat(
          that.$refs.text.offsetHeight / (1263 * 0.9)
        ).toFixed(2);
        that.$emit("changetextheight", percent, that.id);
      });
    },
 
    title(newvalue) {
      this.mtitle = newvalue;
    },
 
    ifchoose(newvalue) {
      this.mifchoose = newvalue;
    }
  },
  methods: {}
};
</script>
<style scoped lang="scss">
.blockcontent {
  display:flex;
  align-items: center;
  .mtitle {
    width: 100%;
    text-indent: 2em;
  }
  .mcontent {
    margin-top: 10px;
    .listtext {
      margin: 5px 0;
    }
  }
  .valueanimation {
    animation: mymove 1s;
  }
  @keyframes mymove {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @-moz-keyframes mymove /* Firefox */ {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes mymove /* Safari 和 Chrome */ {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-o-keyframes mymove /* Opera */ {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>